<template>
    <div class="my-swiper">
        <navigation></navigation>
        <p>勇敢考试，不怕困难</p>
        <div class="btn">
            <login class="login-btn">
                <el-button slot="login-btn" type="goon" round>LOGIN</el-button>
            </login>
            <span class="joiner">or</span>
            <register class="register-btn">
                <el-button slot="register-btn" type="goon" round>SIGNUP</el-button>
            </register>
        </div>
        <swiper ref="mySwiper" :options="swiperOption">
            <swiper-slide :key="item.id" v-for="item in swiperList">
                <img :src=item.imgUrl>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
    import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'
    import Login from "@/components/Login/Login"
    import Register from "@/components/Register/Register"
    import navigation from "@/components/navigation/navigation"
    export default {
        name: "Home",
        components: {
            Login,
            // eslint-disable-next-line vue/no-unused-components
            Register,
            Swiper,
            SwiperSlide,
            navigation
        },
        data(){
            return {
                swiperOption: {
                    loop: true,
                    // direction: 'vertical',
                    slidesPerView : 1,
                    autoplay: {
                        delay: 5000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false
                    },
                    // 显示分页
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true, //允许分页点击跳转
                        dynamicBullets: true,
                    }
                },
                swiperList: [
                    {
                        id: '1',
                        imgUrl: require('../../assets/HomeFullScreen/bigSea.jpg')
                    },
                    {
                        id: '2',
                        imgUrl: require('../../assets/HomeFullScreen/666.jpg')
                    },
                    {
                        id: '3',
                        imgUrl: require('../../assets/HomeFullScreen/lin.jpg')
                    },
                    {
                        id: '4',
                        imgUrl: require('../../assets/HomeFullScreen/two.jpg')
                    }
                ]
            }
        }
    }
</script>

<style scoped>
    @import "../../assets/css/login/loginbtn.css";
    @import "../../assets/css/home/home.css";
    .my-swiper {
        position: relative;
        width: 100%;
        height: 100vh;
        background: rgba(64,414,414,0.4);
    }
    .my-swiper >>> .swiper-pagination {
        position: absolute;
        z-index:9;
        bottom: 5%;
    }
    .my-swiper >>> .swiper-pagination-bullet {
        width: 60px;
        height: 5px;
        border-radius: 0;
        margin-right: 8px;
        background-color: #fff;
    }
</style>
